<template>
  <div class="map">
    <DMap id="dmap" v-bind="mapConfig" @init="initMap" />
  </div>
</template>

<script setup lang="ts">
import DMap from '../dmap/dmap'
import XiangXiangShi from './XiangXiangShi'
import { onUnmounted, ref } from 'vue'
// import MapCore from './mapCore.js'

const emit = defineEmits(['mapInit', 'inputChange'])

const createFilter = (queryString: string) => {
  console.log(queryString)
  return (restaurant: any) => {
    return (
      restaurant.name.includes(queryString)
    )
  }
}
const mapConfig = ref({
  homeButton: false,
  center: [112.325217, 27.804918],
  zoom: 11,
  minZoom: 8,
  provider: ['Tianditu.Satellite', 'Tianditu.Satellite_A'],
  offset: {
    pitch: -Math.PI / 6,
    heading: 0
  }
})

let L: any  = null
let layer: any = null
let map: any
const initMap = (dmap: any) =>{
  L = (window as any).L
  layer = dmap.layer()
  // map = new MapCore(dmap)
  emit('mapInit', dmap)
  // 添加遮罩层
  const canvas = new L.MaskRenderer({ pane: 'tilePane' });
  dmap.setMask(XiangXiangShi.features[0].geometry.coordinates[0], {
    renderer: canvas,
    // weight: 2
    color: '#8FD4FF',
    fillColor: 'rgba(0, 5, 11, 0.8)' // 可通过该参数修改遮罩透明度
  })
}

const showFloodLayer = (geojson: any, isFly: boolean, offset: boolean) => {
  map.showFloodLayer(geojson, isFly, offset)
}

const removeFloodLayer = () => {
  map.removeLayer(map.map.map, 'floodGeojson')
}

defineExpose({
  showFloodLayer,
  removeFloodLayer
})

onUnmounted(() => {
  if (map) {
    map.destroy()
  }
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.map{
  position: relative;
  height: 100%;
  min-height: 800px;
  //background: radial-gradient(rgba(0,45,132,0.00), rgba(0,7,15,0.17) 30%, rgba(0,5,11,0.90));
  .map-input {
    border-radius: 6px;
    position: absolute;
    top: 120px;
    z-index: 999;
    background: rgba(13,45,105,0.60);
    transition: left 0.5s ease-in-out;
  }
  
  .map-right-bottom {
    position: absolute;
    bottom: 20px;
    z-index: 999;
    .map-right-bottom-item {
      width: 36px;
      height: 36px;
      background: rgba(13,45,105,0.60);
      border: 1px solid #409eff;
      border-radius: 4px;
      text-align: center;
      cursor: pointer;
      img {
        margin: 6px 0;
        height: 22px;
      }
    }
  }
}
:deep(.points-tooltip) {
  background-color: rgba(0, 22, 36, 0.86);
  color: #fff;
  padding: 5px 10px;
  border-color: rgba(0, 22, 36, 0.86);
  &::before {
    display: none;
  }
}

</style>
